<template>
  <div>
    <Card>
      <Button class="btn" type="warning" @click="addHost">新增资产</Button>
      <Button class="btn" type="success" @click="handleSelectAll(true)">选择全部</Button>
      <Button class="btn" type="error" @click="handleSelectAll(false)">取消全选</Button>
      <Button class="btn" type="primary" size="middle" @click="exportData(1)">
        <Icon type="ios-download-outline"></Icon>
        导出主机信息
      </Button>
      <br>
      <br>
      <template>
        <Input
          icon="search"
          @on-change="search"
          placeholder="请输入主机名或IP地址..."
        />
        <!--        <i-input>-->
        <!--          <i-select :model.sync="select3"  slot="prepend" style="width: 80px">-->
        <!--            <i-option value="day">主机名</i-option>-->
        <!--            <i-option value="month">IP地址</i-option>-->
        <!--          </i-select>-->
        <!--          <i-button slot="append" icon="ios-search"></i-button>-->
        <!--        </i-input>-->
      </template>


      <Table border :columns="columns8" :data="data7" size="small" ref="table"></Table>

      <Modal title="新增主机" v-model="hostaddModal">
        <template>
          <Form>
            <FormItem label="主机名称" >
              <Input type="text"></Input>
            </FormItem>
            <FormItem label="主机组" >
              <Select v-model="getGroupList">
                <Option>nginx组</Option>
                <Option>MySQL组</Option>
                <Option>kafka组</Option>
              </Select>
            </FormItem>
            <FormItem label="主机地址">
              <Input type="text"></Input>
            </FormItem>
          </Form>
        </template>
      </Modal>

      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="50" show-sizer/>
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
    import Buttons from "../../utils/buttons";

    export default {
        data() {
            return {
                hostaddModal: false,
                select3: 'sss',
                message: [],
                grouplist:[],
                columns8: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center',
                        fixed: 'left',
                    },
                    {
                        title: 'ID',
                        key: 'id',
                        width: 60,
                        align: 'center',
                    },
                    {
                        title: '主机名',
                        key: 'hostname',
                        align: 'center',
                    },
                    {
                        title: '主机组',
                        key: 'hostgroup',
                        align: 'center'
                    },
                    {
                        title: 'IP地址',
                        key: 'ip',
                        align: 'center'
                    },
                    {
                        title: 'CPU信息',
                        key: 'cpuinfo',
                        align: 'center'
                    },
                    {
                        title: '内存信息',
                        key: 'meminfo',
                        align: 'center'
                    },
                    {
                        title: '磁盘信息',
                        key: 'diskinfo',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        fixed: 'right',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                Buttons.viewButton(this, h, params),
                                // h('Button', {
                                //     props: {
                                //         type: 'primary',
                                //         size: 'small'
                                //     },
                                //     style: {
                                //         marginRight: '5px'
                                //     },
                                //     on: {
                                //         click: () => {
                                //             this.show(params.index)
                                //         }
                                //     }
                                // }, '查看信息'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data8: [],
                data7: [
                    {
                        id: 1,
                        hostname: 'testnet-Admin',
                        hostgroup: 'testnet',
                        ip: '172.16.10.52',
                        cpuinfo: '2核',
                        meminfo: '4G',
                        diskinfo: '500G',
                        select: true,
                    },
                    {
                        id: 2,
                        hostname: 'testnet-Cserver',
                        hostgroup: 'testnet',
                        ip: '172.17.1.100',
                        cpuinfo: '4核',
                        meminfo: '8G',
                        diskinfo: '800G',
                        select: false,
                    },
                    {
                        id: 3,
                        hostname: 'testnet-Docker',
                        hostgroup: 'testnet',
                        ip: '172.16.2.33',
                        cpuinfo: '1核',
                        meminfo: '2G',
                        diskinfo: '200G',
                    },
                    {
                        id: 4,
                        hostname: 'testnet-Linear',
                        hostgroup: 'testnet',
                        ip: '192.168.100.252',
                        cpuinfo: '8核',
                        meminfo: '16G',
                        diskinfo: '1T',
                    },
                ]
            }
        },
        methods: {
            getGroupList(){
                for (let group in this.data7){
                    this.grouplist.push(this.data7[i]['hostgroup'])
                }
            },
            addHost() {
                this.hostaddModal = true
                // this.$Modal.confirm({
                //     render: (h) => {
                //         return h('div', [
                //             h('Input', {
                //                 props: {
                //                     type: 'primary',
                //                     size: 'small'
                //                 },
                //                 style: {
                //                     marginTop: '5px',
                //                 },
                //             }, '查看信息'),
                //             h('Input', {
                //                 props: {
                //                     type: 'error',
                //                     size: 'small',
                //                     icon: 'ios-search',
                //                     content: '主机名',
                //                 },
                //                 style: {
                //                     marginTop: '5px',
                //                 },
                //             }, '删除')
                //         ])
                //     }
                // })
            },
            search(data1) {
                console.log(data1);
                console.log(data1['data']);
                for (let i in this.data7) {
                    console.log(Object.values(this.data7[i]));
                    if (this.data7[i]['hostname'].indexOf(data1)) {
                        this.data8.push(this.data7[i])
                    }
                }
            },
            handleSelectAll(status) {
                this.$refs.table.selectAll(status);
            },
            show(index) {
                this.$Modal.info({
                    title: '主机信息',
                    draggable: true,
                    content: `主机名：${this.data7[index].hostname}
                          <br>主机组：${this.data7[index].hostgroup}
                          <br>IP地址：${this.data7[index].ip}
                          <br>CPU信息：${this.data7[index].cpuinfo}
                          <br>内存信息：${this.data7[index].meminfo}
                          <br>磁盘信息：${this.data7[index].diskinfo}`
                })
            },
            remove(index) {
                console.log(index);
                this.data7.splice(index, 1);
            },
            exportData(type) {
                if (type === 1) {
                    this.$refs.table.exportCsv({
                        filename: '所有主机信息'
                    });
                } else if (type === 2) {
                    this.$refs.table.exportCsv({
                        filename: '排序过滤后的主机信息',
                        original: false
                    });
                } else if (type === 3) {
                    this.$refs.table.exportCsv({
                        filename: '自定义主机信息',
                        columns: this.columns8.filter((col, index) => index < 4),
                        data: this.data7.filter((data, index) => index < 4)
                    });
                }
            }
        }
    }
</script>

<style scoped>
  .btn {
    float: left;
    margin-right: 10px;
  }
</style>
